<form nz-form class="ant-advanced-search-form">
  <div nz-row [nzGutter]="24">
    
    <div nz-col nzLg="12" nzXl="8">
      <nz-form-item nzFlex>
        <nz-form-label>{{l('select_warehousing_company')}}</nz-form-label>
        <nz-form-control>
          <nz-select name="select-1" [ngModel]="companyId" (ngModelChange)="companyId=$event;selectCompany()"
            [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="l('select_warehousing_company')">
            <nz-option *ngFor="let option of companyList" [nzValue]="option.id" [nzLabel]="option.houseName"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzLg="12" nzXl="8">

      <nz-form-item nzFlex>
        <nz-form-label>{{l('please_select_area')}}</nz-form-label>
        <nz-form-control>
          <nz-select name="select-2" [ngModel]="areaId" (ngModelChange)="areaId=$event;selectArea()" [ngModelOptions]="{standalone: true}"
            [nzPlaceHolder]="l('please_select_area')">
            <nz-option *ngFor="let option of areaList" [nzValue]="option.id" [nzLabel]="option.code"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzLg="12" nzXl="8" class="control-area">
      <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
      <button nz-button (click)="reset()">{{l('reset')}}</button>
    </div>
  </div>
</form>

<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false" [nzData]="tableHelper.items"
  [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount" [(nzPageIndex)]="tableHelper.pageIndex"
  [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize" (nzPageIndexChange)="load()" (nzPageSizeChange)="load()">
  <thead>
    <tr>
      <th nzWidth="70px" nzLeft="0px">{{l('serial_number')}}</th>
      <th>{{l('area_no')}}</th>
      <th>{{l('site_alone')}}</th>
      <th>{{l('warehousing_company')}}</th>
      
      <th>{{l('sealing_containers_area')}}</th>
      <th>{{l('deblocking_area')}}</th>
      <th>{{l('longitude')}}</th>
      <th>{{l('latitude')}}</th>

      <th>{{l('radius')}}</th>

      <th nzWidth="200px" nzRight="0px">{{l('operation')}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;let i = index">
      <td nzLeft="0px">{{i++1}}</td>
      <td>{{data.code}}</td>
      <td>{{data.siteName}}</td>
      <td>{{data.warehouseName}}</td>
      <td>
        <span *ngIf="data.blockFlag">{{l('bl_true')}}</span>
        <span *ngIf="!data.blockFlag">{{l('bl_false')}}</span>
      </td>
      <td>
        <span *ngIf="data.unblockFlag">{{l('bl_true')}}</span>
        <span *ngIf="!data.unblockFlag">{{l('bl_false')}}</span>
      </td>
      <td>{{data.longitude}}</td>
      <td>{{data.latitude}}</td>
      <td>{{data.radius}}</td>

      <td nzRight="0px">
        <a (click)="showModal(data.id)">{{l('edit')}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="showAddress(data)">{{l('view_security_zones')}}</a>
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>

<!-- Here's the DIV that we inject the map into -->
<!-- <div #mapViewNode></div> -->

<app-create-area-modal #createAreaModal (modalSave)="load()"></app-create-area-modal>
<app-security-zone-modal #securityZoneModal></app-security-zone-modal>